/* 
虚拟DOM准备好之后进入render函数 如果组件标记tag是某种类型
就进入mouteElement阶段 如果子节点是数组那么就循环遍历数组移依次挂载
当自己节点是 字符串的时候就直接插入 没有的时候直接挂载
循环往复将每一个属于自己的子元素插入到自己当中就行
*/

import {nodeOps} from './runtime-dom'

export function render(node,container) {
    //旧虚拟Dom 行虚拟DOM 容器
  patch(null,vnode,container)
}
function patch(n1,n2,container){
  /* 如果是组件的话可能是一个对象 但是此刻暂时不考虑组件的情况 */
  if (typeof n2.tag == 'string') {
    mounteElement(n2.tag)
    if (n2.props) {
      
    }
  }
  
}
function mounteElement(vnode,container){
  const {tag,children,props}=vnode
  /* 生成一个节点 节点和vnode之间有映射关系 */
  const el = (vnode.el= nodeOps.createElement(tag))
  console.dir('el',el)
  // 判断是否有子节点 
  // 如果有子节点
  if (Array.isArray(children)) {
    mountChildren(children,el)
  }else{
    if (typeof children !== 'object') {
      console.log(children)
      nodeOps.hostSetElement(children)
    }else{
    }
  }
  nodeOps.insert(el,container)
}


function mountChildren(children,el){
  for (let i = 0; i < children.length; i++) {
    let children=children[i]
    patch(null,children,el)
    /* 
      当我们遇到一个节点的时候就再次重复操作 首先判断有没有tag或者是一个组件对象。。。等等
      是则调用节点挂载方法 首先使用runtime-dom 返回一个元素 检查是否有子节点如有就遍历子节点
    */
  }
}